<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>MQ</title>
	<link rel="stylesheet" href="../bgAll/css/common.css" type="text/css" />
	<link rel="stylesheet" href="./css/EDAS.css" type="text/css" />

	<link rel="stylesheet" href="../bgAll/css/fakeLoader.css" type="text/css" />
	<style type="text/css">
		.fakeloader {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0px;
			left: 0px;
			z-index: 999;
			background-image: url(../bgAll/img/bg.png);
		}
		
		html , body {
			overflow: hidden;
		}
		.toCenter {
			top: 0;
		    height: 100%;
		    position: relative;
		    margin: 6% 5% 0 5%;
		    padding: 0 0 0 5%;
		}

		.col75 {
			width: 80%;
		}

		.under_section{
			width: 70%;
    		padding: 0 3.5%;
		}
		.under_section .under_div {
			width: 20%;
		    display: inline-block;
		    margin-right: 1%;
		    float: left;
		    position: relative;
		    height: 100%;
		}

		.under_section .under_div img{
			cursor: default;
			height: 24%;
		}

		.under_section .datastream {
			width: 100%;
		    position: relative;
		    float: none;
		    height: 35%;
		    overflow: hidden;
		}

		.under_section .datastream canvas {
			position: absolute;
			top: 60%;
		}
		.under_section .datastream canvas:first-child {
			left: 0;
		}
		.under_section .datastream canvas:last-child {
			right: 0;
		}
		.under_section .under_div:last-child{
			margin-right:0%;
		}

		.under_div .img_link{
			height: 10%;
    		margin: 0 49.5% 5px 49.5%;
    		border-left: 2px dashed #7180a5
		}

		.under_section .under_box{
			background: url('img/under.png');
			background-size: 100% 100%;
			width: 100%;padding-bottom: 10px;
			height: 23%;
		}
		.under_section .under_box p:first-child{
			line-height: 189%;
		}
		.canvas_div{
			margin: auto;
			width: 650px;
			position:relative;
		}
		
		.mainTitle {
			text-align: center;
		    position: relative;
		    top: 8%;
		    font-size: 1.5em;
		    color: #7180a5;
		}

		.mainSection {
			width: 65%;
		    height: 100%;
		    float: left;
		}
		
		.main_div {
			width: 100%;
		    height: 100%;
		    position: relative;
		    border: 2px dashed #7180a5;
		    border-radius: 50px;
		}
		
		.main_div .main_icons_div {
			width: 100%;
   			height: 100%;
		}

		.main_div .main_icons {
			width: 15%;
		    margin: 5% 2%;
		    float: left;
		}

		.main_icons img {
			width: 80%;
			height: 80%;
			margin-bottom: 1%;
		}

		.main_icons .img_text {
			width: 100%;
			height: 18%;
			min-width: 118px;
		}

		.onhover{
			-webkit-animation: shineFrame 2s ease-in-out 0s infinite;
			-moz-animation: shineFrame 2s ease-in-out 0s infinite;
			-o-animation: shineFrame 2s ease-in-out 0s infinite;
			animation: shineFrame 2s ease-in-out 0s infinite;
		}

		.right_div {
			width: 35%;
		    position: relative;
		    text-align: center;
		    float: left;
		    height: 100%;
		}

		.right_box {
			width: 25%;
		    position: relative;
		    text-align: center;
		    float: left;
		    padding: 20% 0;
		}

		.right_box canvas:first-child {
			padding: 12% 0 10% 0;
		}
		
		
		.right_div .under_box{
			background: url('img/under.png');
		    background-size: 100% 100%;
		    width: 88%;
		    padding: 10px 0;
		    line-height: 22px;
		    margin: 0 6%;
		}

		.right_div .bottom_text {
			padding: 10px 0;line-height: 22px;
		}

		/** @begin 下面7个图标 */
		.under_section_icons {
			position: relative;
		    width: 70%;
		    padding: 0 3.5%;
		    height: 25%;
		}

		.under_section_icons .under_div{
			width: 11%;
			margin-right:1%;
			float: left;
			position: relative;
    height: 100%;
		}

		.under_section_icons .under_div:last-child{
			margin-right:0%;
		}

		.under_section_icons .datastream {
			width: 100%;
		    position: relative;
		    float: left;
		    height: 50%;
		    overflow: hidden;
    margin-bottom: 5px;
		}

		.under_section_icons .datastream canvas {
			float: left;
		    position: absolute;
		    top: 62%;
		}
		.under_section_icons .datastream canvas:first-child {
			right: 0;
		}
		.under_section_icons .datastream canvas:last-child {
			left: 0;
		}

		.under_section_icons .dataImg {
			float: none;
    		position: relative;
    		height: 50%;
    		width: 100%;
		}

		.under_section_icons .dataImg img{
			cursor: default;
		}
		

		/** @end 下面7个图标 */
		
	</style>

</head>

<body class="wrap">

<div class="fakeloader"></div>

<div class="mod-star-list">
	<div class="inner"></div>
</div>
<!-- header Start -->
<div id="header" class="mt12 clearfix" style="margin-left:10px">
	<div class="header-left">
		<a href="../EDAS/index.html" class="clearfix">
			<div class="bg-next rotate5 btn"></div>
			<p>浏览下一个产品</p>
		</a>
	</div>
	<div class="header-right">
		<div class="header-open">消息队列<span style="color:#90b8f1;">MQ</span>
			<p>Message Queue</p>
		</div>
	</div>
</div>
<!-- header End -->
<div class="content" style="height: 100%;width: 100%;">
	<!-- 正文开始  -->
	<div class="toCenter">
		<section class="under_section" style="height: 30%;">
			<div class="under_div">
				<img src="img/under_logo_1.png">
				<div class="img_link"></div>
				<div class="under_box">
					<p>应用A</p>
					<p>MQ Client(Java)</p>
				</div>
				<div class="datastream">
					<canvas id="app0"></canvas>
					<canvas id="app1"></canvas>
				</div>
			</div>
			<div class="under_div">
				<img src="img/under_logo_2.png">
				<div class="img_link"></div>
				<div class="under_box">
					<p>应用B</p>
					<p>MQ Client(C++)</p>
				</div>
				<div class="datastream">
					<canvas id="app3"></canvas>
					<canvas id="app4"></canvas>
				</div>
			</div>
			<div class="under_div">
				<img src="img/under_logo_3.png">
				<div class="img_link"></div>
				<div class="under_box">
					<p>应用C</p>
					<p>MQ Client(.Net)</p>
				</div>
				<div class="datastream">
					<canvas id="app5"></canvas>
					<canvas id="app6"></canvas>
				</div>
			</div>
			<div class="under_div">
				<img src="img/under_logo_4.png">
				<div class="img_link"></div>
				<div class="under_box">
					<p>应用D</p>
					<p>MQ Client(HTTP)</p>
				</div>
				<div class="datastream">
					<canvas id="app7"></canvas>
					<canvas id="app8"></canvas>
				</div>
			</div>
		</section>
	
		<div style="height: 60%">
		    <div style="width: 100%;position: relative;height: 50%;margin: 0.5% 0;">
			<section id="mainSection" class="mainSection">
				<div class="main_div shineAction">
					<div class="mainTitle"><h1 style="font-size: 1.2rem;">消息队列MQ</h1></div>
					<div class="main_icons_div">
						<div class="main_icons">
							<a href="details.html?list=1">
								<img src="img/middle_1.png" />
							</a>
							<div class="img_text">技术体系</div>
						</div>
						<div class="main_icons">
							<a href="details.html?list=2">
								<img src="img/middle_2.png" />
							</a>
							<div class="img_text">高可靠</div>
						</div>
						<div class="main_icons">
							<a href="details.html?list=3">
								<img src="img/middle_3.png" />
							</a>
							<div class="img_text">高性能</div>
						</div>
						
						<div class="main_icons">
							<a href="details.html?list=4">
								<img src="img/middle_4.png" />
							</a>
							<div class="img_text">HTTP简单接入</div>
						</div>

						<div class="main_icons">
							<a href="details.html?list=5">
								<img src="img/middle_5.png" />
							</a>
							<div class="img_text">物联/移动接入</div>
						</div>
					</div>
					
				</div>
			</section>
			<div  class="right_div">
				<div class="right_box">
					<canvas id="rightIDC_0" style=""></canvas>
					<canvas id="rightIDC_1"></canvas>
				</div>
				<div class="right_box">
					<div class="under_box">
						<p>应用E</p>
						<p>应用F</p>
					</div>
					<div class="bottom_text">VPC</div>
				</div>
				<div class="right_box">
					<canvas id="rightIDC_2"></canvas>
					<canvas id="rightIDC_3"></canvas>
				</div>
				<div class="right_box">
					<img src="img/customerIDC.png" />
					<div class="bottom_text">IDC</div>
				</div>
			</div>
		</div>
		    <section class="under_section_icons">
			<div class="under_div">
				<div class="datastream">
					<canvas id="db0"></canvas>
					<canvas id="db0_1"></canvas>
				</div>
				<div class="dataImg">
					<img src="img/car.png">
				</div>
			</div>
			<div class="under_div">
				<div class="datastream">
					<canvas id="db1"></canvas>
					<canvas id="db1_1"></canvas>
				</div>
				<div class="dataImg">
					<img src="img/light.png">
				</div>
			</div>
			<div class="under_div">
				<div class="datastream">
					<canvas id="db2"></canvas>
					<canvas id="db2_1"></canvas>
				</div>
				<div class="dataImg">
					<img src="img/fengshan.png">
				</div>
			</div>
			<div class="under_div">
				<div class="datastream">
					<canvas id="db3"></canvas>
					<canvas id="db3_1"></canvas>
				</div>
				<div class="dataImg">
					<img src="img/zhibo.png">
				</div>
			</div>
			<div class="under_div">
				<div class="datastream">
					<canvas id="db4"></canvas>
					<canvas id="db4_1"></canvas>
				</div>
				<div class="dataImg">
					<img src="img/bingxiang.png">
				</div>
			</div>
			<div class="under_div">
				<div class="datastream">
					<canvas id="db5"></canvas>
					<canvas id="db5_1"></canvas>
				</div>
				<div class="dataImg">
					<img src="img/cellphone.png">
				</div>
			</div>
			<div class="under_div">
				<div class="datastream">
					<canvas id="db6"></canvas>
					<canvas id="db6_1"></canvas>
				</div>
				<div class="dataImg">
					<img src="img/application.png">
				</div>
			</div>
		</section>
        </div>

	</div>
	<!-- 正文结束  -->
</div>
<footer class="clearfix">
	<div class="footer-left fl">
		<a href="../index.html?goods=goods0" class="back shineAction"></a>
		<div class="backText">返回主菜单</div>
	</div>
	<div class="footer-right fr">
		<a href="" class="refresh shineAction"></a>
		<div class="refreshText">刷新&nbsp;</div>
	</div>
</footer>
</body>
<script type="text/javascript" src='../bgAll/js/jquery-1.11.1.min.js'></script>
<script src="../bgAll/js/fakeLoader.min.js"></script>
<script type="text/javascript" src='./js/common.js'></script>

<script type="text/javascript" src='../bgAll/js/waypoints.js'></script>
<script type="text/javascript" src='../bgAll/js/star.js'></script>
<script type="text/javascript" src='js/index.js'></script>
<!-- <script type="text/javascript" src='js/MQ.js'></script> -->

</html>